<script setup>
import { RouterLink, RouterView,useRoute } from 'vue-router'
const route = useRoute()
import { ref } from 'vue';
// 1、引入项目静态图，没有配置路径别名的用../
const active = ref(0) // 默认选中第一个
import Index from '../src/assets/首页.png'
import Index1 from '../src/assets/首页1.png'
import classification from '../src/assets/分类.png'
import classification1 from '../src/assets/分类1.png'
import FriendsCircle from '../src/assets/花友圈.png'
import FriendsCircle1 from '../src/assets/花友圈1.png'
import shopping from '../src/assets/订单.png'
import shopping1 from '../src/assets/订单1.png'
import mine from '../src/assets/我的.png'
import mine1 from '../src/assets/我的1.png'
// 2、做点数据结构，用于页面v-for遍历用
const tabBar = [
  {
    title: '首页',
    to: {
      name: 'home',
    },
    icon: Index1, // 默认
    icon_acitve: Index, // 选中
  },
  {
    title: '分类',
    to: {
      name: 'classification',
    },
    icon: classification1, // 默认
    icon_acitve: classification, // 选中
  },
  {
    title: '花友圈',
    to: {
      name: 'flower',
    },
    icon: FriendsCircle1, // 默认
    icon_acitve: FriendsCircle, // 选中
  },
  {
    title: '购物车',
    to: {
      name: 'shopping',
    },
    icon: shopping1, // 默认
    icon_acitve: shopping, // 选中
  },
  {
    title: '我的',
    to: {
      name: 'mine',
    },
    icon: mine1, // 默认
    icon_acitve: mine, // 选中
  },
]
</script>

<template>
  <div>
    <router-view />
    <van-tabbar v-if="!route.meta.hideTabBar" v-model="active" fixed route active-color="#af1d36"
      inactive-color="#707070" safe-area-inset-bottom>
      <van-tabbar-item v-for="(item, index) in tabBar" :key="index" :to="item.to">
        <span>{{ item.title }}</span>
        <template #icon="props">
          <img :src="props.active ? item.icon_acitve : item.icon" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style lang="scss"></style>
